<template>
  <div class="ten_box">
    <m-header modile-title="vue-PDF预览" go-back="true"></m-header>
    <!--<div class="ten_main">
      <div v-for="(item,index) in list" :key="index">
        &lt;!&ndash;单选&ndash;&gt;
        <div v-if="item.type ==='单选'">
          <span style="font-size: 20px">{{item.type}}</span>
          <ul v-for="(u,index2) in item.data">
            <li v-cloak>{{u.name}}</li>
          </ul>
        </div>
        &lt;!&ndash;多选&ndash;&gt;
        <div v-if="item.type === '多选'">
          <span style="font-size: 20px;color: red">{{item.type}}</span>
          <ul v-for="(u,index3) in item.mdata">
            <li v-cloak>{{u.name}}</li>
          </ul>
        </div>
      </div>
    </div>-->
    <div class="pdf">
      <pdf
       ref="pdf"
       src="https://abc.wykbw.com/cspdf.pdf"
       :page="currentPage"
       @num-pages="pageCount=$event"
       @page-loaded="currentPage=$event"
       @loaded="loadPdfHandler"
      ></pdf>
      <div class="bottom-btn">
        <p class="arrow">
          <span @click="changePdfPage(0)" class="turn">上一页</span>
          {{currentPage}} / {{pageCount}}
          <span @click="changePdfPage(1)" class="turn">下一页</span>
        </p>
      </div>
    </div>
  </div>

</template>
<style lang="scss">
  // 防止网络加载慢出现加载数据{{文案}}
  [v-cloak] {
    display: none;
  }

  .ten_box {
    padding-top: 60px;
    .ten_main {
      width: 100%;
      background: #fff;
      .content {
        width: 100%;
        text-align: center;
        span {
          font-size: 20px;
        }
      }
      .nav_router {
        width: 100%;
        display: inline-flex;
        margin-top: 20px;
        li {
          width: 33.3%;
          height: 60px;
          background: indianred;
          text-align: center;
          border-right: 1px solid #fff;
          span {
            font-size: 20px;
            line-height: 60px;
            color: #fff;
          }
        }
        li:last-child {
          border-right: none;
        }
      }
      .test_text {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        span {
          font-size: 24px;
          color: red;
        }
      }
    }
  }

  .pdf{
    position: relative;
    margin-bottom: 60px;
    .bottom-btn{
      position: fixed;
      width: 100%;
      height: 120px;
      bottom: 0;
      padding: 0 10%;
      background: #ffffff;
      z-index: 999;
      .arrow{
        text-align: center;
      }
    }

  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import pdf from 'vue-pdf'

  export default {
    data() {
      return {
        list: [
          {type: '多选', mdata: [{name: '张三'}, {name: '张3'}]},
          {type: '单选', data: [{name: '李四'}]},
          {type: '多选', mdata: [{name: '王五'}, {name: '王5'}, {name: 'wang5'},{name: '王源'}]},
          {type: '单选', data: [{name: '赵六'}]}
        ],
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
      }
    },
    mounted(){
    },
    created() {
    },
    // 组件生命周期函数
    beforeCreate() {
    },
    methods: {
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
        }
      },
      loadPdfHandler(e){
        this.currentPage = 1 // 加载的时候先加载第一页
      }
    },
    components: {
      mHeader,
      pdf
    }
  }
</script>
